<template>

    <div style="height: 100%;">
        <!--     搜索框       -->
        <el-card :inline="true" style="margin: 20px auto;height: 80px;width: 1288px;background-color: rgba(250,235,215,0.16)">
            <el-form :inline="true">
                <el-form-item label="可坐人数" style="width:180px">
                    <el-select v-model="search_tables_form.number" placeholder="人数" @change="load_tables">
                        <el-option v-for="item in 20" :value="item">{{item}}<span>人桌</span></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item style="width:280px">
                    <el-button style="margin-left: 30px" @click="reset_search">重置</el-button>
                    <el-button @click="load_tables" type="primary">查询</el-button>
                </el-form-item>

                <el-form-item>
                        <el-button style="background-color: #B3E09CFF;border-radius: 0;border: none">用餐中</el-button>
                    <el-button style="background-color: #D8EBFFFF;margin-left: 0;border-radius: 0;border: none">已预约</el-button>
                        <el-button style="background-color: #FFFFFF;margin-left: 0;border-radius: 0;border: none">空闲</el-button>

                </el-form-item>
            </el-form>

        </el-card>
        <!--   展示信息     -->
        <el-card style="position:relative;margin: 20px auto;height: 500px;width: 1288px;overflow-y: auto;background-color: rgba(250,235,215,0.16)">
            <el-row :gutter="10">
                <el-col :span="4" v-for="item in tables_arr" style="margin:10px 0">
                    <el-card v-if="store.state.emp_is_show_table_card" :style="{'background-color':item.repastStatus==='0'?'#B3E09CFF':item.repastStatus==='1'?'#f5f5f5':'#D8EBFFFF'}" style="width: 190px">
                        <span style="font-size: 16px;color: #333;font-weight: bolder;font-family: 幼圆">{{item.name}}</span>
                        <span style="font-size: 15px;color: #666;font-family: Avenir, Helvetica, Arial, sans-serif;margin-left: 40px;">可坐{{item.number}}人</span>
                        <br>
                        <el-button :disabled="item.repastStatus==='0'" @click="choose_myTable(item.id,item.name,item.number)" type="success" link style="margin-top: 10px">选择</el-button>
                    </el-card>
                </el-col>
            </el-row>
            <div v-if="store.state.global_my_table_info.id!==''" style="display: flex;position:absolute;left:36px;top: 200px;align-items: center;justify-content: center;width: 200px;height: 200px;background: linear-gradient(to top,#ace0f9  0%, #fff1eb 60%);border-radius: 100px">
                <p style="position: relative;bottom: 50px">已选：</p><br>
                <p style="top: 5px;position: relative;right: 25px;font-size: 30px">{{my_table_name}}</p>
            </div>
        </el-card>
    </div>

</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import store from "@/store";

// 获取员工信息
const user =ref(getUser());
//分店id
var branchId=user.value.branchId

//餐桌搜索
const search_tables_form = ref({
    number:'',status:'0',repastStatus:'',branchId:branchId
})
const my_table_name = computed(() => store.state.global_my_table_info.name)//store改变，随之改变
//const my_table_name = ref(store.state.global_my_table_info.name)//不能监听store的改变


onMounted(()=>{
    load_tables()
})

//重置搜索表单
const reset_search = ()=>{
    search_tables_form.value.number=''
    load_tables()
}
//餐桌数组
const tables_arr = ref([])
//查询餐桌
const load_tables = ()=>{
    let data = qs.stringify(search_tables_form.value)
    axios.get(BASE_URL+'/v1/tables/select?'+data)
        .then((response)=>{
            if(response.data.code===2000){
                tables_arr.value=response.data.data
                console.log(tables_arr.value)
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}


//确认餐桌
const choose_myTable = (id,name,number)=>{
    if(confirm('你选择的是'+name+',可坐'+number+'人，将为你确认餐桌')){
        //查询该餐桌是否还可用
        axios.get(BASE_URL+'/v1/tables/select?id='+id)
            .then((response)=>{
                if(response.data.code===2000){
                    console.log('response.data.data[0]')
                    console.log(response.data.data[0])
                    if((response.data.data[0].status==='0')){
                        //修改餐桌状态
                        let table_form = {id:id,repastStatus:'0'}
                        let data_table = qs.stringify(table_form)
                        axios.post(BASE_URL+'/v1/tables/save',data_table)
                            .then((response)=>{
                                if(response.data.code===2000){
                                    reset_search()
                                    //设置餐桌卡片不显示
                                    store.state.emp_is_show_table_card=false
                                    //修改订单状态
                                    let order_form = {userId:user.value.id,branchId:branchId,tableId:id,status:'2',diningStatus:'1'}
                                    let data_order = qs.stringify(order_form)
                                    axios.post(BASE_URL+'/v1/orders/insertOrders',data_order)
                                        .then((response)=>{
                                            if(response.data.code===2000){
                                                ElMessage.success('选择成功！')
                                                store.state.global_my_table_info.id=id
                                                store.state.global_my_table_info.name=name
                                            }else{
                                                ElMessage.error(response.data.msg)
                                            }
                                        })
                                }else{
                                    ElMessage.error(response.data.msg)
                                }
                            })
                    }else{
                        ElMessage.warning('抱歉该餐桌不可用或已被他人抢走^-^')
                    }
                }else{
                    ElMessage.error(response.data.msg)
                }
            })
    }
}



</script>

<style scoped>



</style>